/* eslint-disable @typescript-eslint/no-explicit-any */
import {create} from 'zustand';
import ContainerDev from '../materials/Container/dev';
import ButtonDev from '../materials/Button/dev';
import PageDev from '../materials/Page/dev';
import ContainerProd from '../materials/Container/prod';
import ButtonProd from '../materials/Button/prod';
import PageProd from '../materials/Page/prod';
import ModalDev from '../materials/Modal/dev';
import ModalProd from '../materials/Modal/prod';
import TableDev from '../materials/Table/dev';
import TableProd from '../materials/Table/prod';
import TableColumnDev from '../materials/TableColumn/dev';
import TableColumnProd from '../materials/TableColumn/prod';
import FormDev from '../materials/Form/dev';
import FormProd from '../materials/Form/prod';
import FormItemDev from '../materials/FormItem/dev';
import FormItemProd from '../materials/FormItem/prod';
//保存组件和组件实例的映射

// 每个组件的基本信息
export interface ComponentConfig {
    name: string;                        // 组件名称
    defaultProps: Record<string, any>,   // 组件默认属性
    desc: string,
    setter?: ComponentSetter[],         //组件属性设置
    stylesSetter?: ComponentSetter[],   //组件样式设置
    // component: any                       // 组件实例
    events?:ComponentEvent[],          //绑定事件
    dev: any;                           //预览
    prod: any;                          //编辑
}

export interface ComponentEvent{
    name: string,
    label: string
}

//组件设置属性（右侧编辑栏需要）
export interface ComponentSetter{//组件可以修改的属性
    name: string,
    label: string,
    type: string,//设置组件类型
    [key:string]:any
}

export interface ComponentMethod {
    name: string
    label: string
}

//组件联动
export interface ComponentConfig {
    name: string;
    defaultProps: Record<string, any>,
    desc: string;
    setter?: ComponentSetter[];
    stylesSetter?: ComponentSetter[];
    events?: ComponentEvent[];
    methods?: ComponentMethod[]
    dev: any;
    prod: any;
}


 
// 定义状态接口，包含组件配置映射表–
interface State {
    componentConfig: {[key: string]: ComponentConfig};  // 以组件名为键的组件配置对象
}

// 定义操作接口，包含注册组件的方法
interface Action {
    registerComponent: (name: string, componentConfig: ComponentConfig) => void  // 注册组件的方法
}

// 创建并导出组件配置存储，使用 zustand 管理状态
export const useComponentConfigStore = create<State & Action>((set) => ({
    // 初始组件配置
    componentConfig: {
        // 容器组件配置
        Container: {
            name: 'Container',
            defaultProps: {},            // 容器组件没有默认属性
            desc:'容器',
            dev: ContainerDev,
            prod: ContainerProd
        },
        // 按钮组件配置
        Button: {
            name: 'Button',
            defaultProps: {
                type: 'primary',         // 默认按钮类型为 primary
                text: '按钮'             // 默认按钮文本为"按钮"
            },
            setter: [//可设置属性
                {
                    name: 'type',
                    label: '按钮类型',
                    type: 'select',
                    options: [
                        {label:'主按钮',value:'primary'},
                        {label:'次按钮',value:'default'}
                    ]
                },
                {
                    name: 'text',
                    label: '文本',
                    type: 'input'
                }
            ],
            stylesSetter: [//可设置样式
                {
                    name: 'width',
                    label: '宽度',
                    type: 'inputNumber'
                },
                {
                    name: 'height',
                    label: '高度',
                    type: 'inputNumber'
                }
            ],
            events: [//button绑定的事件
                {
                    name: 'onClick',
                    label:'点击事件',
                },
                {
                    name: 'onDoubleClick',
                    label:'双击事件',
                }
            ],
            desc:'按钮',
            dev: ButtonDev,
            prod: ButtonProd      
        },
        Modal: {//组件联动
            name: 'Modal',
            defaultProps: {
                title: '弹窗'
            },
            setter: [
                {
                  name: 'title',
                  label: '标题',
                  type: 'input'
                }
            ],
            stylesSetter: [],
            events: [
                {
                    name: 'onOk',
                    label: '确认事件',
                },
                {
                    name: 'onCancel',
                    label: '取消事件'
                },
            ],
            methods: [//联动组件方法
                {
                    name: 'open',
                    label: '打开弹窗',
                },
                {
                    name: 'close',
                    label: '关闭弹窗'
                }
            ],            
            desc: '弹窗',
            dev: ModalDev,
            prod: ModalProd
        },        
        Page: {
            name: 'Page',
            defaultProps: {},
            desc:'页面',
            dev: PageDev,
            prod: PageProd   
        },
        Table: {
            name: 'Table',
            defaultProps: {},
            desc: '表格',
            setter: [
                {
                  name: 'url',
                  label: 'url',
                  type: 'input',
                },
            ],
            dev: TableDev,
            prod: TableProd
        },
        TableColumn: {
            name: 'TableColumn',
            desc: '表格列',
            defaultProps: {
                dataIndex:`col_${new Date().getTime()}`,
                title: '列名'
            },
            setter: [
                {
                  name: 'type',
                  label: '类型',
                  type: 'select',
                  options: [
                    {
                      label: '文本',
                      value: 'text',
                    },
                    {
                      label: '日期',
                      value: 'date',
                    },
                  ],
                },
                {
                  name: 'title',
                  label: '标题',
                  type: 'input',
                },
                {
                  name: 'dataIndex',
                  label: '字段',
                  type: 'input',
                },
              ],
            dev: TableColumnDev,
            prod: TableColumnProd,
        },
        Form: {
            name: 'Form',
            defaultProps: {},
            desc: '表单',
            setter: [
                {
                    name: 'title',
                    label: '标题',
                    type: 'input',
                },
            ],
            events: [
                {
                    name: 'onFinish',
                    label: '提交事件',
                }
            ],
            methods: [
                {
                    name: 'submit',
                    label: '提交',
                }
            ],            
            dev: FormDev,
            prod: FormProd
        },        
        FormItem: {
            name: 'FormItem',
            desc: '表单项',
            defaultProps: {
                name: new Date().getTime(),
                label: '姓名'
            },
            dev: FormItemDev,
            prod: FormItemProd,
            setter: [
              {
                name: 'type',
                label: '类型',
                type: 'select',
                options: [
                  {
                    label: '文本',
                    value: 'input',
                  },
                  {
                    label: '日期',
                    value: 'date',
                  },
                ],
              },
              {
                name: 'label',
                label: '标题',
                type: 'input',
              },
              {
                name: 'name',
                label: '字段',
                type: 'input',
              },
              {
                name: 'rules',
                label: '校验',
                type: 'select',
                options: [
                  {
                    label: '必填',
                    value: 'required',
                  },
                ],
              }
            ]
        }        
        
    },
    // 注册新组件的方法
    registerComponent: (name, componentConfig) => set((state) => {
        return {
            ...state,
            componentConfig: {
                ...state.componentConfig,
                [name]: componentConfig   // 使用组件名作为键，添加新的组件配置
            }
        }
    })
}));
